<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const { directLine, store } = testHelpers.createDirectLineEmulator();

        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          attachments: [
            {
              content: {
                type: 'AdaptiveCard',
                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                version: '1.5',
                actions: [
                  { type: 'Action.Submit', title: 'Button' },
                  {
                    type: 'Action.ShowCard',
                    title: 'Show card',
                    card: {
                      type: 'AdaptiveCard',
                      $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                      version: '1.5',
                      body: [{ type: 'TextBlock', text: 'Hello, World!' }]
                    }
                  }
                ]
              },
              contentType: 'application/vnd.microsoft.card.adaptive'
            }
          ]
        });

        await pageConditions.numActivitiesShown(1);

        const pushButton1 = document.querySelector('.ac-pushButton');

        expect(pushButton1).toHaveProperty('disabled', false);
        expect(pushButton1.hasAttribute('aria-disabled')).toBe(false);

        pushButton1.focus();

        WebChat.renderWebChat({ directLine, disabled: true, store }, document.getElementById('webchat'));

        const pushButton2 = document.querySelector('.ac-pushButton');

        expect(document.activeElement).toBe(pushButton2);
        expect(pushButton2).toHaveProperty('disabled', false);
        expect(pushButton2.getAttribute('aria-disabled')).toBe('true');

        await host.sendTab();
        await host.sendShiftTab();

        // Once focused to another element, the button should not be focusable.
        expect(document.activeElement).not.toBe(pushButton2);

        const showCardButton = Array.from(document.querySelectorAll('.ac-pushButton'))[1];

        await host.click(showCardButton);

        expect(showCardButton.hasAttribute('aria-disabled')).toBe(false);
        expect(showCardButton.getAttribute('aria-expanded')).toBe('true');
      });
    </script>
  </body>
</html>
